Nouveautés sur le Web

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Rachel Andrew

Publié le 20 mai 2025

Lors de la conférence "Nouveautés sur le Web" de Google I/O 2025, nous avons présenté toutes les annonces concernant Baseline, ainsi que quelques-unes des fonctionnalités qui ont été intégrées à Baseline cette année. Cette année a été incroyable pour le Web et pour Baseline. Ce post est un récapitulatif de tout ce qui a été mentionné, avec tous les liens pour en savoir plus.

Tableau de bord de la plate-forme Web et fonctionnalités Web

En 2024, nous avons annoncé le lancement initial du tableau de bord de la plate-forme Web, qui utilise l'ensemble de données des éléments géographiques Web. Il vous permet d'explorer toutes les fonctionnalités qui font partie de la référence.

Les données Web-features sont désormais complètes, et toutes les fonctionnalités de la plate-forme sont mappées. À mesure que de nouvelles fonctionnalités rejoignent la ligne de base chaque mois, les données sont mises à jour, et tout cela est affiché dans le tableau de bord.

Outils pour vous aider à découvrir votre propre cible de référence

Vous pouvez baser votre stratégie d'assistance pour les navigateurs sur la cible mobile de la référence "Largement disponible" (comme l'a fait l'agence britannique Clearleft), mais vous pouvez également adopter une cible fixe basée sur une année de référence. Vous pouvez désormais utiliser vos propres données utilisateur, ainsi que les données sur les fonctionnalités Web, pour déterminer la meilleure cible pour vous.

L'année dernière, lors de la conférence I/O, nous avons annoncé que RUMvision allait implémenter Baseline dans son produit. Cette intégration est désormais en service.

Comme il utilise vos données RUM, il vous aide à identifier l'année de référence à adopter en fonction de ces données plutôt qu'en fonction d'une moyenne globale. Il peut également vous aider à déterminer si la disponibilité généralisée de la référence est adaptée à votre cas.

Vous pouvez également utiliser vos données Google Analytics pour voir clairement quel pourcentage de vos utilisateurs est compatible avec chaque cible de référence à l'aide du nouvel outil de vérification de la référence Google Analytics.

Il ne s'agit là que de deux outils parmi une collection croissante qui vous aident à mapper vos données utilisateur réelles sur la référence.

Le groupe de la communauté Web DX a récemment lancé une extension pour Netlify qui prend en charge différentes années de référence et est largement disponible sur vos sites pour vous aider à décider de ce que vous devez cibler dans vos outils de compilation. Des intégrations avec le produit RUM Observatory de Cloudflare et Contentsquare seront bientôt disponibles.

Intégrer les données à vos propres outils

Les données Web-features sont ouvertes et disponibles pour vos propres intégrations. Nous essayons de vous faciliter la tâche.

Utilisez l'API Web Platform Dashboard ou consommez les données Web-features directement à partir du package npm.

Vous pouvez désormais mapper des versions de navigateurs à une cible de référence à l'aide du module baseline-browser-mapping du groupe de la communauté WebDX du W3C. Ce module peut être utilisé dans un environnement JavaScript côté serveur ou en téléchargeant des fichiers JSON ou CSV qui sont actualisés quotidiennement à partir du dépôt.

Ces données incluent des mappages non seulement pour l'ensemble de navigateurs de référence principal, mais également pour les navigateurs en aval tels que Samsung Internet, Opera, UC Browser et Android Webview.

Savoir si votre cible de référence est compatible avec des fonctionnalités

Les informations de référence sont désormais disponibles sur la majorité des pages MDN et Can I Use. Elles sont également disponibles dans le tableau de bord de la plate-forme Web, ainsi que dans les articles de web.dev et de CSS Tricks. Toutefois, vous devez contacter l'assistance pour cela. Il serait beaucoup plus utile que les informations de référence s'affichent dans votre IDE lorsque vous codez, et dans tous les autres outils que vous utilisez.

Nous sommes ravis de vous annoncer que de nombreux outils clés sont désormais compatibles avec la référence, soit de manière intégrée, soit facilement intégrée.

browserslist-config-baseline

De nombreux outils tels que Babel et PostCSS utilisent browserslist pour déterminer les navigateurs à prendre en charge.

Avec le groupe de discussion WebDX et des membres de la communauté, l'équipe Chrome a contribué à la sortie d'un nouvel outil appelé browserslist-config-baseline. Cela vous permet de configurer vos cibles browserslist en termes de référence, comme "largement disponible" ou "années de référence".

Ainsi, tout outil qui utilise une cible browserslist peut désormais être exprimé en termes de référence.

Pour en savoir plus, consultez la section Utiliser Baseline avec browserslist.

Référence dans les linters : ESLint et Stylelint

L'utilisation de Baseline avec des linters a récemment été rendue possible grâce à quelques nouveaux outils dans l'espace des linters, à commencer par ESLint pour CSS.

ESLint de référence comporte une règle use-baseline. Vous pouvez définir cette valeur sur votre cible de référence préférée. Vous serez alors averti lorsque vous utiliserez des fonctionnalités plus récentes que votre cible. Vous pouvez choisir de résoudre ces avertissements: soit en remplaçant cette fonctionnalité par des primitives, soit en supprimant l'avertissement du linter, ce qui est une solution parfaitement valide lorsque vous savez que vous utilisez une fonctionnalité de pointe de manière sécurisée, par exemple s'il s'agit d'une amélioration progressive.

Par défaut, ESLint n'émet pas d'avertissement si de nouvelles fonctionnalités sont utilisées dans des blocs @supports, car les navigateurs non compatibles ne les évaluent de toute façon pas.

Pour vos besoins de linting HTML, vous pouvez également utiliser un plug-in de la communauté appelé html-eslint.

Stylelint est officiellement compatible avec un plug-in appelé stylelint-plugin-use-baseline. Cette règle se comporte exactement comme la règle ESLint pour le CSS, mais elle s'exécute sur Stylelint.

De nombreux linters disposent également de plug-ins IDE. Vous pouvez ainsi obtenir des commentaires immédiats sur l'état de la ligne de base pendant le codage sous la forme de soulignements en zigzag.

Référence dans VS Code et JetBrains WebStorm

De nombreux IDE permettent depuis longtemps de pointer sur une fonctionnalité dans l'éditeur pour afficher la liste des versions de navigateur compatibles.

Toutefois, il peut être assez difficile de comprendre si cette fonctionnalité est réellement sûre à utiliser. Vous devez analyser mentalement si des navigateurs majeurs sont manquants de cette liste et si la version de ce navigateur est récente.

Pour résoudre ce problème, nous avons conclu un partenariat avec VS Code, l'IDE le plus populaire utilisé par des millions de développeurs Web, afin d'intégrer directement les données de référence dans ces cartes flottantes.

Vous pouvez maintenant pointer sur une fonctionnalité pour savoir si elle est considérée comme une référence et pendant combien de temps, ou si certains navigateurs majeurs ne l'implémentent pas encore complètement.

Les fonctionnalités acceptées incluent les propriétés CSS, les éléments HTML et les attributs HTML. Pour en savoir plus, consultez Visual Studio Code est désormais compatible avec la référence.

Cette intégration signifie que tous les IDE basés sur VS Code bénéficieront également de ces cartes flottantes.

Nous sommes également heureux d'annoncer que JetBrains implémente des cartes flottantes dans son IDE JavaScript et TypeScript WebStorm.

Le Web s'améliore plus vite que jamais

Nous espérons que Baseline vous aidera à profiter du fait que le Web interopérable s'améliore plus rapidement que jamais.

Vous pouvez utiliser le tableau de bord de la plate-forme Web pour afficher toutes les fonctionnalités qui sont devenues disponibles en tant que référence pour la première fois au cours des 12 derniers mois, depuis Google I/O 2024.

Un certain nombre de fonctionnalités seront bientôt disponibles en tant que référence, car elles sont incluses dans le projet Interop 2025. Pour en savoir plus sur toutes les fonctionnalités incluses, consultez Interop2025: une nouvelle année d'améliorations de la plate-forme Web.

Modes d'écriture en mode paysage

Nous avons déjà vu une fonctionnalité devenir disponible en tant que référence : les valeurs sideways-rl et sideways-lr pour la propriété CSS writing-mode. Si vous utilisez un mode d'écriture vertical uniquement à des fins de mise en page, les valeurs latérales sont probablement celles à atteindre.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Positionnement des ancres

Le positionnement des ancres a été publié dans Chrome 125. Il vous permet d'associer la position d'un élément à un ancrage, par exemple lorsque vous ouvrez une info-bulle avec un bouton.

Il est désormais inclus dans Interop 2025. Il devrait donc rejoindre la référence cette année.

Core Web Vitals: LCP et INP

API LCP

API Event Timing (pour l'INP)

Les signaux Web peuvent vous aider à quantifier l'expérience de votre site et à identifier des opportunités d'amélioration. L'initiative Web Vitals vise à simplifier le paysage et à aider les sites à se concentrer sur les métriques les plus importantes, à savoir les métriques Core Web Vitals.

Interop 2025 inclut les métriques LCP (Largest Contentful Paint) et Interaction to Next Paint (INP) en implémentant l'API LargestContentfulPaint et l'API Event Timing dans les navigateurs.

Améliorations apportées à l'élément <details>

L'élément <details> lui-même est déjà disponible dans la version de référence. Il a été inclus dans Interop 2025, car un certain nombre de fonctionnalités rendent les widgets de divulgation avec <details> plus utiles.

L'élément <details> contient un élément <summary>, qui est la partie visible sur la page lorsque l'élément <details> est réduit. En dehors de <summary> se trouve le contenu de l'élément <details>, qui est masqué jusqu'à ce que l'utilisateur clique sur le résumé.

L'une des choses qui sont rendues interopérables lors de Interop 2025 est de masquer le contenu à l'aide de content-visibility plutôt que de display, ce qui signifie que si le contenu n'est pas développé, il ne s'affichera pas du tout.

Le pseudo-élément ::marker fait également partie du travail Interop 2025. Le pseudo-élément ::marker vous permet de styliser le triangle d'ouverture de l'élément <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Puis un autre pseudo-élément : ::details-content.

::details-content représente le contenu, la partie de l'élément "details" qui se développe et se réduit, et vous permet de le styliser.

[open]::details-content {
  border: 5px dashed hotpink;
}

Des améliorations intéressantes ont également été apportées, comme l'expansion automatique de l'élément <details> avec les correspondances de recherche dans la page et l'ajout de la valeur until-found de l'attribut HTML hidden à la référence "Nouveau disponible". Cela permet de masquer un élément jusqu'à ce qu'il soit trouvé à l'aide de la recherche dans la page du navigateur ou qu'il soit directement accédé en suivant un fragment d'URL.

CSS @scope

La règle CSS @scope vous permet de limiter la portée de vos sélecteurs. En définissant une racine de portée avec @scope, toutes les règles de style imbriquées dans la règle at ne s'appliquent qu'à cet arbre DOM.

Par exemple, si vous ne souhaitez cibler que des éléments <img> dans un élément avec une classe .card, .card devient la racine de l'étendue.

@scope (.card) {
    img {
        border-color: green;
    }
}

Pour en savoir plus, consultez Limiter la portée de vos sélecteurs avec la règle @scope du CSS.

scrollend

scrollend est une autre fonctionnalité qui réduit la complexité et améliore les interfaces de défilement. Sans l'événement scrollend, il n'existe aucun moyen fiable de détecter qu'un défilement est terminé.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Avec l'événement scrollend, le navigateur effectue toutes ces évaluations difficiles à votre place.

document.onscrollend = event => {…}

Pour voir d'autres exemples, consultez Scrollend, un nouvel événement JavaScript.

Transitions de vue dans le même document

Enfin, les transitions de vue font partie de Interop 2025. Le travail implique des transitions de vue dans le même document, donc celles des applications monopages et des classes de transitions de vue.

Suivez le tableau de bord Interop 2025 pour voir comment le projet évolue au fil de l'année.

Les fonctionnalités incluses dans Interop 2025 ne seront pas les seules à faire partie de la référence cette année, mais leur inclusion dans les projets nous indique qu'elles sont prioritaires et qu'elles seront bientôt disponibles.

Le test vient de commencer

Cette année a été passionnante pour Baseline. Nous avons beaucoup avancé depuis nos annonces de l'année dernière. Le remplissage des données des éléments géographiques Web est maintenant terminé. Cela a ouvert les vannes et permis de créer des outils pour les développeurs. Nous ne faisons que commencer. Si vous avez un produit ou un outil Open Source qui pourrait bénéficier de ces données, n'hésitez pas à nous contacter.

Gardez un œil sur web.dev, car nous continuerons de publier des annonces concernant de nouveaux outils, ainsi que des tutoriels pour vous aider à profiter de tout ce que le Web a à offrir.